<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楼层滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .floor {
            margin-bottom: 300px;
        }
        
        .floor .con {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        
        .sidebar {
            list-style: none;
            width: 100px;
            height: 30px;
            position: fixed;
            right: 0%;
            bottom: 30%;
        }
        
        .sidebar li {
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="floor">
            <h3>楼层一</h3>
            <div class="con"></div>
        </div>
        <div class="floor">
            <h3>楼层二</h3>
            <div class="con"></div>
        </div>
        <div class="floor">
            <h3>楼层三</h3>
            <div class="con"></div>
        </div>
        <div class="floor">
            <h3>楼层四</h3>
            <div class="con"></div>
        </div>
    </div>
    <ul class="sidebar">
        <li>楼层1</li>
        <li>楼层2</li>
        <li>楼层3</li>
        <li>楼层4</li>
    </ul>

    <script>
        //获取所有的li节点
        let lis = document.querySelectorAll('li');
        let floors = document.querySelectorAll('.floor');
        let timerId = null;
        lis.forEach((item, index) => {
            // console.log(item);
            item.addEventListener('click', function() {
                //获取目标滚动距离
                let target = floors[index].offsetTop;
                console.log(target);
                //获取当前滚轮距离
                let current = document.documentElement.scrollTop;
                console.log(current);
                //点击楼层的时候，当前滚轮距离缓慢增加，或者减少，需要用到定时器，用定时器的时候，❗❗需要清除定时器
                //判断一下目标距离是否大于滚轮距离，大于的时候，滚轮缓慢增加
                if (target > current) {
                    timerId = setInterval(function() {
                        current += 30;
                        document.documentElement.scrollTop = current;
                        if (Math.abs(target - current) < 30) {
                            clearInterval(timerId);
                            timerId = null;
                            document.documentElement.scrollTop = target;
                        }
                    }, 30)
                } else {
                    timerId = setInterval(function() {
                        current -= 30;
                        document.documentElement.scrollTop = current;
                        if (Math.abs(target - current) < 30) {
                            clearInterval(timerId);
                            timerId = null;
                            document.documentElement.scrollTop = target;
                        }
                    }, 30)
                }
            })
        })
    </script>
</body>

</html>